<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="Template.xhtml"
                xmlns:p="http://primefaces.org/ui"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core">


    <ui:define name="conteudo">
      
            <p:commandButton type="button" value="Resetar Zoom" style="float: right;" icon="ui-icon-cancel" onclick="chart.resetZoom()"/>
            <br/> <br/>
            <p:lineChart value="#{graficoVenda.linearModel}"  legendPosition="e" zoom="true" animate="true"  
                         title="Vendas nos ultimos meses" minY="0" maxY="200" widgetVar="chart"/>   <br/>
            <br/>
            <p:fieldset legend="Clientes Cadastrados Hoje" toggleable="true"  toggleSpeed="500"  >

                <p:dataTable id="cars" var="car" value="#{tabelaClientes.carsSmall}" rowKey="#{car.model}" paginator="true" rows="10"  
                             selection="#{tabelaClientes.selectedCars}" selectionMode="multiple" filteredValue="#{tabelaClientes.filteredCars}" >

                    <f:facet name="header">
                        Selecione os clientes e clique em "Visualizar" para ver mais detalhes
                    </f:facet>

                    <p:column headerText="Empresa" sortBy="#{car.model}" filterBy="#{car.model}" id="model">  
                        #{car.model}  
                    </p:column>  

                    <p:column headerText="Nascimento" sortBy="#{car.year}" filterBy="#{car.year}" id="year">  
                        #{car.year}  
                    </p:column>  

                    <p:column headerText="Filial" sortBy="#{car.manufacturer}" filterBy="#{car.manufacturer}"  id="manufacturer">  
                        #{car.manufacturer}  
                    </p:column>  

                    <p:column headerText="Setor" sortBy="#{car.color}" filterBy="#{car.color}" id="color">  
                        #{car.color}  
                    </p:column> 

                    <f:facet name="footer">
                        <p:commandButton value="Visualizar" icon="ui-icon-search" update=":form:display" oncomplete="carDialog.show()"/>
                    </f:facet>
                </p:dataTable>


            </p:fieldset>  

            
      <p:dialog header="Detalhes do Cliente" widgetVar="carDialog"
                      width="250" showEffect="explode" hideEffect="explode">

                <p:dataList id="display"
                            value="#{tabelaClientes.selectedCars}"
                            var="selectedCar" type="definition">

                    Nome: #{selectedCar.model}, Idade: #{selectedCar.year}      

                </p:dataList>
            </p:dialog>
    </ui:define>

</ui:composition>
